<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body>div{
            display: flex;
            width: 300px;
            justify-content: space-between;
        }
        select{
            width: 100px;height: 200px;
        }
    </style>
    <script>
        function $(id){
            return document.getElementById(id);
        }

        /**
         * 单个右移
         */
        function singleRight(){
            let leftArray = $("leftBox").getElementsByTagName("option");
            for (let i=0;i<leftArray.length;i++){
                if (leftArray[i].selected===true){
                    $("rightBox").appendChild(leftArray[i--]);
                    // addRight(leftArray[i--],"rightBox");
                }
            }
        }
        function addRight(obj,box){
            $(box).appendChild(obj);
        }
        /**
         * 全部右移
         */
        function allRight(){
            let leftArray = $("leftBox").getElementsByTagName("option");
            for (let i=0;i<leftArray.length;i++){
                    $("rightBox").appendChild(leftArray[i--]);
            }
        }

        /**
         * 单个左移
         */
        function singleLeft(){
            let rightArray = $("rightBox").getElementsByTagName("option");
            for (let i=0;i<rightArray.length;i++){
                if (rightArray[i].selected===true){
                    $("leftBox").appendChild(rightArray[i--]);
                }
            }
        }

        /**
         * 全部左移
         */
        function allLeft(){
            let rightArray = $("rightBox").getElementsByTagName("option");
            for (let i=0;i<rightArray.length;i++){
               $("leftBox").appendChild(rightArray[i--]);
            }
        }
    </script>
</head>
<body>
    <div>
        <select multiple  id="leftBox">
            <option>语文</option><!--selected-->
            <option>数学</option>
            <option>生物</option>
            <option>化学</option>
            <option>英语</option>
        </select>
        <section>
            <br>
            <input type="button" value=">" id="right" onclick="singleRight()"> <br><br>
            <input type="button" value=">>" id="allRight" onclick="allRight()"> <br><br>
            <input type="button" value="<" id="left"  onclick="singleLeft()"> <br><br>
            <input type="button" value="<<" id="allLeft" onclick="allLeft()">
        </section>
        <select name="right" id="rightBox" multiple>
            <option>历史</option>
            <option>地理</option>
        </select>
    </div>
</body>
</html>